<!--
 * @Author       : Hejh(3010733382@qq.com)
 * @Version      : V1.0
 * @Date         : 2024-01-29 20:06:40
 * @Description  : 用户设置页面
-->
<template>
  <div class="user-setting-container" id="user-setting-container">
    <div
      class="left h-[100vh] w-[240px] border-r-light-800 overflow-auto"
      v-if="!isSmall"
    >
      <div class="title">账号中心</div>
      <div class="info w-full pt-3">
        <div class="profile flex flex-col mb-3 pl-5">
          <div class="avator">
            <n-avatar
              round
              :size="60"
              :src="renderAvatorSrc(userStore.userInfo?.avator as string)"
            />
          </div>
          <div class="username text-[16px] text-[#999] mt-4">
            {{ userStore.userInfo?.username || '用户' }}
          </div>
          <div class="nickname text-[14px] text-[#aaa] mt-3">
            {{ userStore.userInfo?.nickname || '用户' }}
          </div>
        </div>
        <n-tabs
          type="line"
          placement="left"
          class="w-full"
          :value="activeTab"
          @update:value="handleActiveNameChange"
        >
          <n-tab name="base">
            <i class="iconfont icon-shezhi-shezhi-tianchong mr-2 ml-3"></i>
            基础设置
          </n-tab>
          <n-tab name="account">
            <i class="iconfont icon-yonghu1 mr-2 ml-3 text-[18px]"></i>
            账号设置
          </n-tab>
          <n-tab name="secure">
            <i class="iconfont icon-24gf-shieldCheck mr-2 ml-3"></i>
            安全管理
          </n-tab>
          <n-tab name="static">
            <i class="iconfont icon-statistics-filled mr-2 ml-3"></i>
            使用统计
          </n-tab>
        </n-tabs>
      </div>
    </div>

    <n-drawer
      v-model:show="showLeftMask"
      :width="'40%'"
      :trap-focus="false"
      :block-scroll="false"
      placement="left"
      to="#user-setting-container"
    >
      <n-drawer-content>
        <div class="left h-[100vh] w-[240px] border-r-light-800 overflow-auto">
          <div class="title">账号中心</div>
          <div class="info w-full pt-3">
            <div class="profile flex flex-col mb-3 pl-5">
              <div class="avator">
                <n-avatar
                  round
                  :size="60"
                  :src="renderAvatorSrc(userStore.userInfo?.avator as string)"
                />
              </div>
              <div class="username text-[16px] text-[#999] mt-4">
                {{ userStore.userInfo?.username || '用户' }}
              </div>
              <div class="nickname text-[14px] text-[#aaa] mt-3">
                {{ userStore.userInfo?.nickname || '用户' }}
              </div>
            </div>
            <n-tabs
              type="line"
              placement="left"
              class="w-full"
              :value="activeTab"
              @update:value="handleActiveNameChange"
            >
              <n-tab name="base">
                <i class="iconfont icon-shezhi-shezhi-tianchong mr-2 ml-3"></i>
                基础设置
              </n-tab>
              <n-tab name="account">
                <i class="iconfont icon-yonghu1 mr-2 ml-3 text-[18px]"></i>
                账号设置
              </n-tab>
              <n-tab name="secure">
                <i class="iconfont icon-24gf-shieldCheck mr-2 ml-3"></i>
                安全管理
              </n-tab>
              <n-tab name="static">
                <i class="iconfont icon-statistics-filled mr-2 ml-3"></i>
                使用统计
              </n-tab>
            </n-tabs>
          </div>
        </div>
      </n-drawer-content>
    </n-drawer>

    <div class="right-view h-[100vh] flex flex-col" style="position: relative">
      <!-- 浮动按钮 -->
      <n-float-button
        v-if="isSmall"
        :left="0"
        :top="16"
        shape="square"
        size="small"
        :width="30"
        :height="30"
        class="z-40 !bg-opacity-50 bg-primaryColor"
        position="absolute"
        @click="handleShowMask"
      >
        <SvgIcon icon="zhedie2" color="#fff"></SvgIcon>
      </n-float-button>

      <div
        class="user-setting-header flex items-center"
        :class="isSmall ? '!pl-10' : 'pl-3'"
      >
        <left-line class="w-0"></left-line>
        {{ renderTitle(activeTab) }}
      </div>
      <div class="panel bg-lightColor m-2 flex-1 px-2 py-3">
        <Base v-if="activeTab === 'base'"></Base>
        <Account v-if="activeTab === 'account'"></Account>
        <Secure v-if="activeTab === 'secure'"></Secure>
        <Static v-if="activeTab === 'static'"></Static>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import useUserStore from '@/stores/modules/user'
import type { IndexObj } from '@/types/commom'
import { renderAvatorSrc } from '@/utils/commonBusiness'
import { userMenuShow } from '@/hooks/useMenuShow'
import Base from './components/Base.vue'
import Account from './components/Account.vue'
import Secure from './components/Secure.vue'
import Static from './components/Static.vue'

const { isSmall } = userMenuShow()

// 左边的蒙层遮罩
const showLeftMask = ref(false)

const handleShowMask = () => {
  showLeftMask.value = !showLeftMask.value
}

const userStore = useUserStore()
const router = useRouter()
const route = useRoute()

const renderTitle = (key: string) => {
  const tabInfo: IndexObj = {
    base: '基础设置',
    account: '账号设置',
    secure: '安全管理',
    static: '使用统计'
  }

  return tabInfo[key] || '设置'
}

const activeTab = ref('base')
const handleActiveNameChange = (value: string) => {
  activeTab.value = value
  showLeftMask.value = false
  router.push({
    name: 'userSettings',
    params: {
      page: value
    }
  })
}
onMounted(() => {
  activeTab.value = (route.params.page as string) || 'base'
  if (!userStore.userInfo) {
    userStore.getUserInfo()
  }
})
</script>

<style scoped lang="scss">
.user-setting-container {
  width: 100vw;
  height: 100vh;
  :deep(.n-tabs-nav) {
    width: 100%;
  }

  display: flex;
  .left {
    .title {
      font-size: 20px;
      color: #1890ff;
      font-weight: 100;
      padding: 0;
      margin: 0;
      margin-bottom: 10px;
      height: 70px;
      line-height: 70px;
      overflow: hidden;
      text-align: center;
      position: relative;
      z-index: 2;
      background: rgba(255, 255, 255, 0.03);
      border-bottom: 1px solid #eee;
    }
  }

  .right-view {
    flex: 1;
    overflow: auto;
    background: $bg-light-2;

    .user-setting-header {
      box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
      border-bottom: 1px solid #e6e6e6;
      height: 70px;
      min-height: 70px;
      padding: 0 12px 0 0;
      background: #fff;
    }

    .panel {
      border-radius: 5px;
    }
  }
}
</style>
